.setting-dialog {
	width: 720px;
	color: #676767;

	.x-dialog-title {
		padding-left: 20px;
		height: 50px;
		line-height: 50px;
		text-align: left;
		background-color: #dbdbdb;
		border-bottom: 1px solid #b3b3b3;
	}

	.x-dialog-close {
		top: 11px;

	}

	.x-dialog-content {
		height: 370px;
		display: block;
		position: relative;

		& > .left {
			width: 120px;
			top: 0;
			bottom: 0;
			position: absolute;
			padding-top: 10px;
			background-color: #f2f2f2;

			& > ul > li {
				height: 40px;
				line-height: 40px;
				padding-left: 25px;
				cursor: pointer;
				position: relative;

				&:before {
					content: ' ';
					height: 40px;
					width: 5px;
					left: 0;
					position: absolute;
					display: none;
					background-color: #24c1ff;
				}

				&.active {
					&:before {
						display: block;
					}
				}

				&:hover {
					color: #333;
				}
			}
		}


		& > .right {
			width: 600px;
			left: 120px;
			top: 0;
			bottom: 0;
			position: absolute;

			.tab {
				display: none;

				&.active {
					display: block;
				}
			}

			.tab-theme {
				padding: 30px;

				.field {
					margin-top: 20px;

					&:first-child {
						margin-top: 0;
					}

					& > span {
						line-height: 32px;
						margin-right: 20px;
						display: inline-block;
						width: 80px;
						text-align: right;
					}

					& > div {
						display: inline-block;
					}

					.theme {
						height: 32px;
						width: 320px;
						padding-left: 10px;
						border: 1px solid #ddd;
						background-color: #f7f7f7;
					}
				}
			}

			.tab-editor {
				padding: 30px;
				
				.field {
					margin-top: 20px;

					&:first-child {
						margin-top: 0;
					}

					& > span {
						line-height: 32px;
						margin-right: 20px;
						display: inline-block;
						width: 80px;
						text-align: right;
					}

					& > div {
						display: inline-block;
					}

					.code-theme {
						height: 32px;
						width: 320px;
						padding-left: 10px;
						border: 1px solid #ddd;
						background-color: #f7f7f7;
					}

					.tab-size {
						height: 32px;
						width: 320px;
						padding-left: 10px;
						border: 1px solid #ddd;
						background-color: #f7f7f7;
					}
				}
			}

			.tab-shortcut {
				padding-left: 30px;
				padding-top: 20px;

				.grid {
					width: 502px;
					border: 1px solid #ddd;

					 & > div {
						height: 24px;
						line-height: 24px;
						width: 500px;
						white-space: nowrap;
						font-size: 12px;
						background-color: white;
						border-top: 1px solid #ddd;

						&:first-child {
							font-weight: bold;
							border-top: none;
						}

						&:nth-child(odd) {
							background-color: #f2f2f2;
						}

						.name {
							display: inline-block;
							width: 200px;
							float: left;
							padding-left: 20px;
							letter-spacing: 1px;
							border-right: 1px solid #ddd;
						}

						.shortcut {
							display: inline-block;
							width: 300px;
							padding-left: 20px;
							float: left;
						}
					}
				}
			}

			.tab-help {
				padding: 30px;

				.tips {
					color: #676767;
					font-weight: bold;
				}

				.faq {
					margin-top: 15px;

					.question {
						color: #0088ff;
						margin-bottom: 5px;
					}

					.answer {
						color: #676767;
					}

					.link {
						cursor: pointer;
						color: #110FDE;
					}
				}
			}

			.tab-about {
				padding: 30px;

				.about-logo {
					width: 100px;
					height: 50px;
					background: url('../image/logo3.png') no-repeat center;
					background-size: contain;
				}

				.intro {
					margin-top: 7px;
					line-height: 24px;
				}

				.copyright {
					font-size: 12px;
					margin-top: 30px;
				}
			}
		}
	}
}